<template>
    <el-table-column :sortable="sortable" :prop="property" :label="label" :width="width"
                     class-name="sea-table-input-row">
        <template #default="{row, column, $index}">
            <table-select :change="props.change"
                          :property="props.property" :value="row[props.property]"
                          :row="row" :options="props.options"></table-select>
        </template>
    </el-table-column>
</template>

<script setup lang="ts">
/* eslint-disable */
import TableSelect from "./table-select.vue"
import {ModifiedMethod} from "@/widget/types";

/**
 * 表格行级下拉框
 *
 * 首先能看到的，就是这个组件封装很奇怪，一个组件拆成两份写；
 *
 * 主要就是为了提供一个更优的 change() 事件：
 *
 * 所有的行内编辑组件，值都不是即时生效的，允许后台提交成功之后，再进行更新赋值。
 */
interface Props {
    width?: number | string
    // 字段名
    property: string
    // 列名
    label: string
    // 数据变化事件
    change?: ModifiedMethod
    // 是否
    sortable?: boolean

    // 文字提示
    placeholder?: string
    // 是否可清除
    clearable?: boolean

    /** 数据字典配置 */
    options: DictionaryItem[] | string
}

const props = withDefaults(defineProps<Props>(), {
    sortable: false,
    placeholder: '请选择',
    clearable: true
})
</script>
